import React from 'react';
import ReactDOM from 'react-dom';
import {DatePicker, List} from 'antd-mobile';
import enUs from 'antd-mobile/lib/date-picker/locale/en_US';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            
        };
    }

    componentDidMount() {
        
    }

    onChange = (value) => {
        const obj = {[this.props.name]: this.formatDate(value)}
        this.props.callback && this.props.callback(obj,this.props.index);
    }

    formatDate = (date) => {
        // const pad = n => n < 10 ? `0${n}` : n;
        // const dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
        return date.getTime();
    }

    render() {
        const {data, label, name, value, language,disabled=false} = this.props;
        let minDate = new Date('1901-01-01');
        let msg = language == 'English' ? 'Please Select' : window.LangMessage.please_select || `請選擇`;
        return (
            <div className="line">
                <DatePicker 
                    disabled={disabled}
                    extra={msg}
                    mode="date"
                    // title={`請選擇${label}`}
                    minDate={minDate}
                    value={value ? new Date(value) : ''}
                    onChange={this.onChange}
                    locale={language == 'English'?enUs:''}
                >
                    <List.Item arrow="horizontal">{label}</List.Item>
                </DatePicker>
            </div>
        )
    }
}

export default App;